use dioxus::prelude::*;

#[derive(PartialEq, Clone, Props)]
pub struct DialogProps {
    #[props(into)]
    pub title: String,
    #[props(into)]
    pub content: Element,
    pub show: bool,
    pub on_confirm: EventHandler<()>,
    pub on_cancel: EventHandler<()>,
    #[props(default = "确认".to_string())]
    pub confirm_text: String,
    #[props(default = "取消".to_string())]
    pub cancel_text: String,
    #[props(default = true)]
    pub show_cancel: bool,
    #[props(default = DialogType::Default)]
    pub dialog_type: DialogType,
}

#[derive(PartialEq, Clone)]
pub enum DialogType {
    Default,
    Success,
    Warning,
    Info,
}

impl DialogType {
    fn get_icon_class(&self) -> &str {
        match self {
            DialogType::Success => "text-green-500",
            DialogType::Warning => "text-yellow-500",
            DialogType::Info => "text-blue-500",
            DialogType::Default => "text-gray-500",
        }
    }

    fn get_icon(&self) -> Element {
        match self {
            DialogType::Success => rsx! {
                svg {
                    class: "h-6 w-6 {self.get_icon_class()}",
                    fill: "none",
                    stroke: "currentColor",
                    view_box: "0 0 24 24",
                    path {
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        stroke_width: "2",
                        d: "M5 13l4 4L19 7"
                    }
                }
            },
            DialogType::Warning => rsx! {
                svg {
                    class: "h-6 w-6 {self.get_icon_class()}",
                    fill: "none",
                    stroke: "currentColor",
                    view_box: "0 0 24 24",
                    path {
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        stroke_width: "2",
                        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    }
                }
            },
            DialogType::Info => rsx! {
                svg {
                    class: "h-6 w-6 {self.get_icon_class()}",
                    fill: "none",
                    stroke: "currentColor",
                    view_box: "0 0 24 24",
                    path {
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        stroke_width: "2",
                        d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    }
                }
            },
            DialogType::Default => rsx! {}
        }
    }
}

#[component]
pub fn Dialog(props: DialogProps) -> Element {
    if !props.show {
        return rsx!{};
    }

    let DialogProps {
        title,
        content,
        show: _,
        on_confirm,
        on_cancel,
        confirm_text,
        cancel_text,
        show_cancel,
        dialog_type,
    } = props;

    rsx! {
        div {
            class: "fixed inset-0 z-50 overflow-y-auto",
            div {
                class: "flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0",
                // 背景遮罩
                div {
                    class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-800 dark:bg-opacity-75",
                    aria_hidden: "true"
                }
                // 对话框内容
                div {
                    class: "inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-gray-700 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle",
                    div {
                        class: "bg-white dark:bg-gray-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4",
                        div {
                            class: "sm:flex sm:items-start",
                            div {
                                class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full",
                                div {
                                    class: "flex items-center",
                                    div {
                                        class: "flex-shrink-0",
                                        {dialog_type.get_icon()}
                                    }
                                    h3 {
                                        class: "text-lg font-medium leading-6 text-gray-900 dark:text-white",
                                        {title}
                                    }
                                }
                                div {
                                    class: "mt-2",
                                    {content}
                                }
                            }
                        }
                    }
                    // 按钮区域
                    div {
                        class: "bg-gray-50 dark:bg-gray-600 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6",
                        button {
                            class: "inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm",
                            onclick: move |_| on_confirm.call(()),
                            {confirm_text}
                        }
                        if show_cancel {
                            button {
                                class: "mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-500",
                                onclick: move |_| on_cancel.call(()),
                                {cancel_text}
                            }
                        }
                    }
                }
            }
        }
    }
}